<template>
	<view class="bgcolor">
		<header-top :messageInfo="{typeFlag:true,message:'结算信息'}">
		</header-top>
		<view style="background-color: #fff;padding: 70rpx 63rpx;box-sizing: border-box;padding-bottom: 30rpx;">
			<view class="bank-card" :style="{backgroundImage:'url('+item.bank_backimage+')'}" v-for="(item,index) in backCard"
				:key="index">
				<view class="flexbetween" style="padding:20rpx;box-sizing: border-box;">
					<view class="flexbetween">
						<view class="flexcenter"
							style="background-color: #fff;width: 50rpx;height: 50rpx;border-radius: 50%;margin-right: 20rpx;">
							<image :src="item.bank_image" mode="" style="width: 34rpx;height: 34rpx;">
							</image>
						</view>
						<text>{{item.bank_name}}</text>
					</view>
					<view class="flexbetween" @click="amendBack(item.id)">
						<text>修改</text>
						<u-icon name='arrow-right' color='fff'></u-icon>
					</view>
				</view>
				<view class="flexcenter" style="margin-top: 40rpx;font-size: 40rpx;" v-show="item.status==1?true:false">
					<text>{{item.cardnum}}</text>
				</view>
				<view class="flexcenter" style="margin-top: 40rpx;font-size: 40rpx;" v-show="item.status==2?true:false">
					<text>{{item.cardnum_hidden}}</text>
				</view>
				<view class="show" @click="showNums(item)"
					style="display: flex;justify-content: flex-end;align-items: center;margin-right: 20rpx;margin-top: 30rpx;">
					<image  v-show="item.status==1?true:false" src="@/static/imags/mypage/yj01.png" mode="widthFix"
						style="width: 33rpx;height: 19rpx;"></image>
					<image v-show="item.status==2?true:false" src="@/static/imags/mypage/yj02.png" style="width: 33rpx;height: 19rpx;"></image>
				</view>
			</view>
			<view style="width: 100%;text-align: center;" @click="addBack">
				<text>+添加银行卡</text>
			</view>
		</view>
		<view class="user" v-for="(item,index) in backCard" :key="index">
			<view class="flexbetween" style="margin-bottom: 44rpx;"> 
				<text style="color: #999999;">户名</text>
				<text>{{item.name}}</text>
			</view>
			<view class="flexbetween" style="margin-bottom: 44rpx;">
				<text style="color: #999999;">银行卡类型</text>
				<text>{{item.bank_name}}</text>
			</view>
			<view class="flexbetween">
				<text style="color: #999999;">账户类型</text>
				<text>{{item.type==1?"对公":"对私"}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				name: '张三的名字',
				type: '对私',
				cardType: '中国银行',
				backCard: [],
				hidenum:""
			}
		},
		onShow() {
			this.init()

		},
		methods: {
			init(){
				httpRequest.request('appapi/staff/user/jiesuan', 'POST', {
				}).then(res => {
					console.log(res,223)
					this.backCard = res.data.list
				})
			},
			showNums(obj) {
				obj.status = obj.status==1?2:1
				// let data = obj.cardnum
				// let nums = null
				// obj.show = !obj.show
				// if (obj.show) {
				// 	nums = data.replace(/\s/g, '').replace(/(\d{4})\d+(\d{4})$/, "** **** **** **** $2")
				// } else {
				// 	nums = data
				// }
				// // this.hidenum = obj.cardnum
				// // obj.cardnum = nums
				// console.log(nums);
			},
			addBack() {
				uni.navigateTo({
					url: '/pages/mypage/addBackInfo',
				})
			},
			amendBack(id) {
				console.log(id)
				uni.navigateTo({
					url:"/pages/mypage/addBackInfo?id=" + id
				})
				// uni.navigateTo({
				// 	url: '/pages/mypage/addBackInfo?id='+ id
				// })
			}
		}
	}
</script>

<style scoped lang="scss">
	.bank-card {
		height: 260rpx;
		// background-size: 618rpx 262rpx;
		background-repeat: no-repeat;
		color: #fff;
		margin-bottom: 30rpx;
		background-size: 100% 97%;
	}

	.user {
		margin-top: 20rpx;
		width: 100%;
		background-color: #fff;
		padding: 40rpx;
		box-sizing: border-box;
		font-size: 28rpx;
	}

	// .show{
	// 	width: 33rpx !important;
	// 	height: 19rpx !important;
	// }
</style>
